<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>progressShow</title>
</head>
<style>
    .form-box {
        width: 500px;
    }

    .form-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .tipText {
        display: block;
        font-size: 16px;
        flex: 90px 0 0;
    }

    .tipText::after {
        content: "：";
        margin-right: 6px;
        display: inline-block;
        vertical-align: middle;
    }

    input.text-input {
        display: block;
        padding: 0 10px;
        border: 1px solid #ccc;
        width: 100%;
        height: 40px;
        outline: none;
        caret-color: #09f;
        /*光标颜色*/
        transition: all 300ms;
        border-left-width: 5px;
    }

    input.text-input:valid {
        border-color: #3c9;
    }

    input.text-input:invalid {
        border-color: #f66;
    }

    input[type=checkbox] {
        position: relative;
        appearance: none; /*去除系统默认appearance的样式引发的问题*/
        cursor: pointer;
        transition: all 100ms;
        border-radius: 31px;
        width: 70px;
        height: 40px;
        background-color: #e9e9eb;
        outline: none;
        margin: 0;
        display: inline-block;
    }

    input[type=checkbox]::before {
        position: absolute;
        content: "";
        transition: all 300ms cubic-bezier(.45, 1, .4, 1);
        border-radius: 31px;
        width: 70px;
        height: 40px;
        background-color: #e9e9eb;
    }

    input[type=checkbox]::after {
        position: absolute;
        left: 4px;
        top: 4px;
        border-radius: 27px;
        width: 32px;
        height: 32px;
        background-color: #fff;
        box-shadow: 1px 1px 5px rgba(#000, .3);
        content: "";
        transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
    }

    input[type=checkbox]:checked {
        background-color: #3c9;
    }

    input[type=checkbox]:checked::before {
        transform: scale(0);
    }

    input[type=checkbox]:checked::after {
        transform: translateX(30px);
    }

    button {
        width: 48%;
        height: 40px;
        padding: 0;
        margin: 0;
        border: none;
        outline: none;
        cursor: pointer;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        background: #63c3ff;
        color: #fff;
    }

    button::before {
        --size: 0;
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--size);
        height: var(--size);
        background-image: radial-gradient(circle closest-side, #09f, transparent);
        content: "";
        transform: translate3d(-50%, -50%, 0);
        transition: width 200ms ease, height 200ms ease;
    }

    button[type=reset] {
        background: #6fcc6f;
    }

    button[type=reset]::before {
        background-image: radial-gradient(circle closest-side, #4abf4a, transparent);
    }

    button:hover::before {
        --size: 400px;
    }

    button:first-child {
        margin-right: 4%;
    }

    span {
        position: relative;
        pointer-events: none;
    }
</style>
<style type="text/css">
    @property --progress {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 0%;
    }

    .g-progress {
        margin: auto;
        width: 240px;
        height: 25px;
        border-radius: 25px;
        background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
        border: 1px solid #eee;
        transition: .3s --progress;
    }


</style>

<script src="js/jquery.min.js"></script>
<script src="js/axios.min.js"></script>

<body>

<br>
<div style="left: 50%;margin-left: 350px;">

    <h1>新建 M3u8 下载</h1>
    添加后，开始下载</br></br>
    <form class="form-box" id="newM3u8" onsubmit=onSubmit(event)>
        <div class="form-item">
            <label class="tipText">id</label>
            <input class="text-input"
                   name="id"
                   oninput="setCustomValidity('')"
                   oninvalid="setCustomValidity('请输入合法的昵称>_<')"
                   pattern="^[\w-]{1,20}$"
                   placeholder="下载文件名(3-20个字符，仅限英文字母，数字和下划线)"
                   required
                   type="text">
        </div>
        <div class="form-item">
            <label class="tipText">名称</label>
            <input class="text-input"
                   name="name"
                   pattern="^[\w-]{1,20}$"
                   placeholder="下载文件名(3-20个字符，仅限英文字母，数字和下划线)"
                   required
                   type="text">
        </div>
        <div class="form-item">
            <label class="tipText">url</label>
            <input class="text-input"
                   name="url"
                   placeholder="下载 url"
                   required
                   type="url">
        </div>
        <!--    <div class="form-item">-->
        <!--        <label >VIP</label>-->
        <!--        <input name="isAdult" type="checkbox" />-->
        <!--    </div>-->
        <div class="form-item">
            <button onmousemove="move(event)" type="reset">
                <span>重 置</span>
            </button>
            <button onmousemove="move(event)" type="submit">
                <span>提交下载</span>
            </button>
        </div>
    </form>

    <hr>
    <h1>测试网页子链接可访问性与速度（未处理跳转）</h1>
    <form class="form-box" id="testUrl" onsubmit=onSubmitTest(event)>

        <div class="form-item">
            <label class="tipText">url</label>
            <input class="text-input"
                   name="url"
                   placeholder="待测试 url，一般为hao123类导航页"
                   required
                   type="url">
        </div>

        <div class="form-item">
            <button onmousemove="move(event)" type="submit">
                <span>测试速度</span>
            </button>
        </div>
    </form>

    <hr>
    <h1>下载文件</h1>
    <form class="form-box" id="downloadFile" onsubmit=onSubmitDownloadFile(event)>

        <div class="form-item">
            <label class="tipText">url</label>
            <input class="text-input"
                   name="urlInfo"
                   placeholder="待下载 urlInfo，一般为网盘连接解析后；aria2c <url> --out <fileName> --header <header>；curl -L -C - <url> -o <fileName> -b <header>；"
                   required
                   type="text">
        </div>

        <div class="form-item">
            <button onmousemove="move(event)" type="submit">
                <span>提交下载</span>
            </button>
        </div>
    </form>
</div>

<br>
<hr>
<hr>
<br>
<div id="progress-container">
</div>
</body>
<script>
    function move(e) {
        const x = e.pageX - e.target.offsetLeft;
        const y = e.pageY - e.target.offsetTop;
        e.target.style.setProperty("--x", `${x}px`);
        e.target.style.setProperty("--y", `${y}px`);
    }

    function onSubmit(e) {
        e.preventDefault(); // 阻止表单提交
        $.ajax({
            type: "post",//请求方式
            url: "/m3u8/create",//发送请求地址
            data: $('#newM3u8').serialize(),
            timeout: 5000,//超时时间：5秒
            dataType: "text",//设置返回数据的格式
            //请求成功后的回调函数 data为json格式
            success: function (data) {
                console.log(data);
            },
            //请求出错的处理
            error: function (data) {
                alert('创建失败...');
            }
        });
    }

    function onSubmitTest(e) {
        e.preventDefault(); // 阻止表单提交
        $.ajax({
            type: "post",//请求方式
            url: "/m3u8/test",//发送请求地址
            data: $('#testUrl').serialize(),
            timeout: 5000,//超时时间：5秒
            dataType: "text",//设置返回数据的格式
        });
    }

    function onSubmitDownloadFile(e) {
        e.preventDefault(); // 阻止表单提交
        $.ajax({
            type: "post",//请求方式
            url: "/download/parse",//发送请求地址
            data: $('#downloadFile').serialize(),
            timeout: 5000,//超时时间：5秒
            dataType: "text",//设置返回数据的格式
        });
    }

</script>
<script>
    getForm();

    var timerId;
    $(function () {
        // 自动调用方法，实现进度条的实时更新
        timerId = window.setInterval(getForm, 2000);
    });

    function getForm() {
        //使用JQuery从后台获取JSON格式的数据;
        $.ajax({
            type: "post",//请求方式
            url: "/progress/api/queryAll",//发送请求地址
            timeout: 5000,//超时时间：5秒
            dataType: "json",//设置返回数据的格式
            //请求成功后的回调函数 data为json格式
            success: function (list) {
                console.log(list);
                // 新建
                var newHtml = '';
                for (let i = 0; i < list.length; ++i) {
                    var data = list[i];
                    console.log(data);
                    var id = data.id;
                    var finished = data.processed == data.total;
                    var statusHtml = finished ? '<label style="background: aquamarine">完成 用时：' + data.alreadyCostTime + '</label>' : '<label style="background: lime">' + data.status + '</label>' +
                        '        <br><label style="left: 50%;margin-left: 350px;">' + data.processed + '/' + data.total + '</label>' +
                        '        <br><div style="left: 50%;margin-left: 350px;">预计剩余:' + data.estimatedRemaining + '</div>:';
                    var progressBarHtml = '        <div class="g-progress" onclick="getForm()" style="--progress: ' + data.percent + '">' +
                        '        </div>' +
                        '    </div><br><hr><br>';


                    newHtml = newHtml + '<div class="g-container">' +
                        '        <b><label  style="left: 50%;margin-left: 350px;">' + id + '</label></b>' + statusHtml + progressBarHtml;

                }
                $('#progress-container').html(newHtml);

            },
            //请求出错的处理
            error: function () {
                window.clearInterval(timerId);
                console.log("请求出错");
            }
        });
    }


</script>
</html>